<template>
  <div id="virtual-scroll-target" class="scroll" style="max-height: 500px; max-width: 300px">
    <q-virtual-scroll
      scroll-target="#virtual-scroll-target"
      :ChildList="parts"
      separator
      v-slot="{ item, index }"
    >
      <q-item :key="index" dense class="child-box" :class="getStatusColor(item.status)">
        <div class="sn-num">
          {{ item.serial_number }}
        </div>
        <q-item-section>
          <q-item-label class="item">
            {{ item.stock_code }}
            <q-icon name="info" color="black" @click="small = true" />
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-virtual-scroll>
    <StatusDialog v-model="small"></StatusDialog>
    <div class="q-pa-sm q-ml-sm ">- End -</div>
  </div>
  
</template>
<script setup lang="ts">
import { ref } from 'vue'
import StatusDialog from 'src/components/StatusDialog.vue'
import {getStatusColor} from 'src/utils/getPublic'
import { usePartsStore } from 'src/stores/partsStore'
import { Parts } from 'src/services/type';
import { getChildPartsList } from 'src/services/partsService';
/* import { getChildPartsList } from 'src/services/partsService' */
const small = ref(false)

const props = defineProps<{
  stockCode:string
  serialNo:string
}>();
const parts = ref<Parts[]>([]);

async function init() {
  const res = await getChildPartsList(props.stockCode, props.serialNo);
  if (res.data) {
    parts.value = res.data;
  }
}
init();


</script>

<style scoped>
.item {
  padding: 0.5rem;
  padding-top: 1.3rem;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  
}

.child-box {
  position: relative;
  margin-left: 10px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

.status-none{
  background-color: #d9d9d9;
}

.sn-num {
  position: absolute;
  color: #3c57f8;
  font-weight: 600;
  font-size: 12px;
  top: 6px;
  left: 6px;
}

.now-child {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #d9d9d9;
}
</style>
